<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Agency Template</title>
        <link rel="stylesheet" href="css/app.css">
    </head>
    <body>
        <!-- Top Bar -->
        <div class="top-bar">
            <div class="top-bar-left">
                <ul class="menu">
                    <li class="menu-text">Yeti Agency</li>
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                </ul>
            </div>
            <div class="top-bar-right">
                <ul class="menu">
                    <li><a href="#">Three</a></li>
                    <li><a href="#">Four</a></li>
                    <li><a href="#">Five</a></li>
                    <li><a href="#">Six</a></li>
                </ul>
            </div>
        </div>
        <!-- ./Top Bar -->
        <!-- Big Callout -->
        <div class="callout big">
            <div class="row column text-center">
                <h1>Changing World Through Design</h1>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
                <a href="#" class="button large">Learn More</a>
                <a href="#" class="button large hollow">Learn Less</a>
            </div>
        </div>
        <!-- ./Big Callout-->
        <article class="grid-container">
            <div class="grid-x grid-margin-x">
                <div class="cell medium-6 small-order-2 medium-order-1">
                    <h2>Our Agency, our selves.</h2>
                    <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.
                        Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam
                        porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi
                        euismod magna ac lorem rutrum elementum. Donec viverra auctor.</p>
                </div>
                <div class="cell medium-6 small-order-1 medium-order-2">
                    <img src="https://placehold.it/750x350" class="thumbnail">
                </div>
            </div>
            <div class="grid-x grid-margin-x">
                <div class="cell medium-4">
                    <h2>Photoshop</h2>
                    <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.
                        Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
                </div>
                <div class="cell medium-4">
                    <h2>Javascript</h2>
                    <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.
                        Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
                </div>
                <div class="cell medium-4">
                    <h2>Marketing</h2>
                    <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.
                        Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
                </div>
            </div>
            <hr>
            <div class="row column">
                <!-- Responsive Menu -->
                <ul class="menu vertical medium-horizontal expanded text-center">
                    <li><a href="#"><div class="stat">28</div><span>Websites</span></a></li>
                    <li><a href="#"><div class="stat">43</div><span>Apps</span></a></li>
                    <li><a href="#"><div class="stat">95</div><span>Ads</span></a></li>
                    <li><a href="#"><div class="stat">59</div><span>Cakes</span></a></li>
                    <li><a href="#"><div class="stat">18</div><span>Logos</span></a></li>
                </ul>
                <!-- ./Responsive Menu -->
            </div>
            <hr>
            <div class="row column">
                <h3>Our Recent Work</h3>
            </div>
            <div class="grid-x grid-margin-x medium-up-3 large-up-4">
                <div class="cell"><img src="https://placehold.it/550x550" alt="" class="thumbnail"></div>
                <div class="cell"><img src="https://placehold.it/550x550" alt="" class="thumbnail"></div>
                <div class="cell"><img src="https://placehold.it/550x550" alt="" class="thumbnail"></div>
                <div class="cell"><img src="https://placehold.it/550x550" alt="" class="thumbnail"></div>
                <div class="cell"><img src="https://placehold.it/550x550" alt="" class="thumbnail"></div>
                <div class="cell"><img src="https://placehold.it/550x550" alt="" class="thumbnail"></div>
                <div class="cell"><img src="https://placehold.it/550x550" alt="" class="thumbnail"></div>
                <div class="cell"><img src="https://placehold.it/550x550" alt="" class="thumbnail"></div>
                <div class="cell"><img src="https://placehold.it/550x550" alt="" class="thumbnail"></div>
                <div class="cell"><img src="https://placehold.it/550x550" alt="" class="thumbnail"></div>
                <div class="cell"><img src="https://placehold.it/550x550" alt="" class="thumbnail"></div>
                <div class="cell"><img src="https://placehold.it/550x550" alt="" class="thumbnail"></div>
            </div>
            <hr>
        </article>
        <article class="grid-container">
            <div class="row column">
                <ul class="menu">
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                    <li><a href="#">Four</a></li>
                </ul>
            </div>
        </article>
        <script src="node_modules/jquery/dist/jquery.js"></script>
        <script src="node_modules/what-input/dist/what-input.js"></script>
        <script src="node_modules/foundation-sites/dist/js/foundation.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>
